<template>
	<div class="wrapper">
		<!-- <img src="../../assets/logo.png" alt class="logo"> -->
		<div class="main">
			<div class="block">
				<!-- <el-select v-model="level" style="width: 100%" placeholder="请选择服务商">
                    <el-option value="1" label="服务商"></el-option>
                    <el-option value="2" label="子服务商"></el-option>
				</el-select>-->
				<h2>用户登录</h2>
				<br />
				<br />
				<el-input v-model="name" placeholder="请输入用户名/手机号">
					<img slot="prefix" src="../assets/userico.png" alt style="margin-top: 10px;height: 20px;" />
				</el-input>
				<br />
				<br />
				<br />
				<el-input v-model="password" type="password" placeholder="请输入密码">
					<img slot="prefix" src="../assets/lockico.png" alt style="margin-top: 10px;height: 20px;" />
				</el-input>
				<br />
				<br />
				<br />
				<div class="btns">
					<el-button
						@click="login"
						class="login"
						type="primary"
						style="background: #f74380;border-color: #f74380;"
					>登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>

export default {
	data() {
		return {
			// name: "agent",
			// password: "1234"
			name: "",
			password: ""
		};
	},
	methods: {
		login(level) {
			const { name, password } = this;
			this.$http({
				url: '/logintoken/',
				method: "post",
				data: {
					username: name,
					password
				}
			}).then(res => {
				sessionStorage.setItem('token', res.token)
				sessionStorage.setItem('user_type', res.user_type)
				sessionStorage.setItem('user_id', res.user_id)
				sessionStorage.setItem('username', name)

				this.$store.commit('setUserName', name)
				this.$store.dispatch('getMenu').then(path => {
					this.$router.push(path)
				})
			});
		}
	}
};

</script>
<style lang="scss" scoped>
.block {
	width: 350px;
	margin: 0 auto;
	background: white;
	padding: 30px 20px;
	border-top: 8px solid #f74380;
	position: absolute;
	right: 200px;
	top: 50%;
	transform: translateY(-50%);
	.login {
		width: 100%;
	}
}
.logo {
	margin-top: 50px;
	margin-left: 300px;
	margin-bottom: 20px;
}
.wrapper {
	.main {
		width: 100%;
		background-image: url("../assets/bg.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 55vh;
		position: relative;
		margin-top: 150px;
	}
}
.btns {
	display: flex;
	justify-content: space-between;
}
.footer {
	font-size: 16px;
	color: #666;
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
}
</style>
